<template>
  <div class="cardList">
    <div class="card" id="card1">
      <i class="iconfont">&#xe6a3;</i>
      <div class="count">
        <p class="number">
          <count-to :startVal="0" :endVal="1598" :duration="3000"></count-to>
        </p>
        <p class="desc">用户访问量</p>
      </div>
    </div>
    <div class="card" id="card2">
      <i class="iconfont">&#xe67c;</i>
      <div class="count">
        <p class="number">
          <count-to :startVal="0" :endVal="2600" :duration="2000"></count-to>
        </p>
        <p class="desc">系统消息</p>
      </div>
    </div>
    <div class="card" id="card3">
      <i class="iconfont">&#xe63d;</i>
      <div class="count">
        <p class="number">
          <count-to :startVal="0" :endVal="153" :duration="1000"></count-to>
        </p>
        <p class="desc">待办事项</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CountTo } from 'vue3-count-to'
</script>

<style lang="less" scoped>
.cardList {
  display: flex;
  box-sizing: border-box;
  .card {
    padding: 0;
    background: #f0f0f0;
    flex: 1;
    display: flex;
    font-size: 24px;
    &:nth-child(1) {
      color: #409eff;
      .iconfont {
        background: #409eff;
      }
    }
    &:nth-child(2) {
      margin: 0 6px;
      color: #64d572;
      .iconfont {
        background: #64d572;
      }
    }
    &:nth-child(3) {
      color: #f25e43;
      .iconfont {
        background: #f25e43;
      }
    }
    .iconfont {
      width: 100px;
      height: 100px;
      font-size: 32px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .count {
      flex: 1;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      box-sizing: border-box;
      .number {
        font-weight: bold;
      }
      p {
        margin: 0;
      }
      .desc {
        color: #999;
        font-size: 16px;
      }
    }
  }
}
</style>
